<template>
  <!-- 企业创新主页- 品牌创新模块 -->
  <div>
    <div class="brandInnovation">
      <div class="box">
        <div class="item" :class="{
          item_active: active == index,
        }" @mouseenter="mouseenter(index)" v-for="(item, index) in list" :key="item.id">
        <router-link  :to="{ name: 'innovationBrand', query: { id: item.category_id } }">
          <transition name="fade" mode="out-in">
            <div class="transition" v-show="active == index">
              <img class="img" :src="item.webimages[0]" />
              <div class="text-1">
                <div class="max">
                  {{ item.name }}
                </div>
                <div class="min">
                  {{ item.description }}
                </div>
              </div>
              <!--  category_id 根据菜单id 来区别-->
              <div  class="more">
                <div class="t">了解更多</div>
                <img class="ic" src="@/assets/image/home/ic_right_white.png" />
              </div>
            </div>
          </transition>
          </router-link>

          <transition name="fade" mode="out-in">
            <div class="transition" v-show="active != index">
              <img class="img" :src="item.webimages[1]" />
              <div class="text">
                <div class="max">  {{ item.name }}</div>
                <div class="min">{{ item.subtitle }}</div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <div class="brandInnovationMobile">

      <div class="box">
        <div class="item" :class="{
          item_active: active == index,
        }" @click="mouseenter(index)" v-for="(item, index) in list" :key="item.id">
          <router-link  :to="{ name: 'innovationBrand', query: { id: item.category_id } }">
            <transition name="fade" mode="out-in">
              <div class="transition" v-show="active == index">
                <img class="img" :src="item.mobileimages[0]" />
                <div class="text-1">
                  <div class="max">
                    {{ item.name }}
                  </div>
                  <div class="min">
                    {{ item.description }}
                  </div>
                </div>
                <div class="more">
                  <div class="t">了解更多</div>
                  <img class="ic" src="@/assets/image/home/ic_right_white.png" />
                </div>
              </div>
            </transition>
          </router-link>

          <transition name="fade" mode="out-in">
            <div class="transition" v-show="active != index">
              <img class="img" :src="item.mobileimages[1]" />
              <div class="text">
                <div class="max">
                  {{ item.name }}
                </div>
                <div class="min">
                  {{ item.subtitle }}
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      active: 0,
      timerInterval:null
    };
  },
  mounted() {
    this.timer();

  },
  // unmounted() {
  //   // 页面关闭（路由跳转）时清除定时器
  //   clearInterval(this.timerInterval);
  //   this.timerInterval = null;
  // },
  beforeUnmount() {
    // 页面关闭（路由跳转）时清除定时器
    clearInterval(this.timerInterval);
    this.timerInterval = null;
  },

  methods: {
    mouseenter(i) {
      this.active = i;
    },
      /**
     * 定时器
     */
     timer() {
  
      
      this.timerInterval = setInterval(() => {
        console.log(this.active)
         if(this.active < 2){
           this.active++;
         }else{
          this.active = 0;       
         }
     
      }
        , 5000);
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .brandInnovationMobile {
    display: none;
  }

  .brandInnovation {

    .box {
      cursor: pointer;
      display: flex;
      width: 100%;
      height: 581px;
      justify-content: space-between;
      position: relative;
      gap: 10px;

      .item {
        position: relative;
        width: 300px;
        height: 581px;
        transition: width 800ms;

        &_active {
          width: 770px;
        }

        .transition {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .text {
          overflow: hidden;
          z-index: 99;
          position: absolute;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          top: 250px;

          .max {
            direction: flex;
            justify-content: center;
            overflow: hidden;

          //  height: 50px;
            font-size: 39px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }

          .min {
            direction: flex;
            justify-content: center;
            margin-top: 10px;
            overflow: hidden;
          //  height: 30px;

            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .text-1 {
          overflow: hidden;
          z-index: 99;
          position: absolute;
          width: 400px;
          display: flex;
          flex-direction: column;
          align-items: center;
          left: 50px;
          bottom: 53px;

          .max {
            width: 400px;
            overflow: hidden;
          //  height: 50px;
            font-size: 39px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }

          .min {
            width: 400px;
            margin-top: 10px;
            overflow: hidden;
        //    height: 30px;

            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .more {
          cursor: pointer;
          position: absolute;
          bottom: 100px;
          right: 30px;
          display: flex;
          align-items: center;

          .t {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
          }

          .ic {
            object-fit: fill;
            margin-left: 8px;
            width: 10px;
            height: 14px;
          }
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 400ms ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>

<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .brandInnovation {
    display: none;
  }

  .brandInnovationMobile {
    width: 100%;
    background: #fff;

    .box {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      position: relative;


      .item {
        margin-top: fn.rpx(20);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: fn.rpx(700);
        height: fn.rpx(290);
        transition: width 800ms;

        &_active {
          height: fn.rpx(520);
        }

        .transition {

          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .text {
          overflow: hidden;
          z-index: 99;
          position: absolute;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          top: 40%;

          .max {
            direction: flex;
            justify-content: center;
            overflow: hidden;
         //   height: fn.rpx(50);
            font-size: fn.rpx(39);
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }

          .min {
            direction: flex;
            justify-content: center;
            margin-top: fn.rpx(10);
            overflow: hidden;
          //  height: fn.rpx(30);
            font-size: fn.rpx(20);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .text-1 {
          overflow: hidden;
          z-index: 99;
          position: absolute;
          width: fn.rpx(400);
          display: flex;
          flex-direction: column;
          align-items: center;
          left: fn.rpx(50);
          bottom: fn.rpx(53);

          .max {
            width: fn.rpx(400);
            overflow: hidden;
          //  height: fn.rpx(50);
            font-size: fn.rpx(39);
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }

          .min {
            width: fn.rpx(400);
            margin-top: fn.rpx(10);
            overflow: hidden;
         //   height: fn.rpx(30);

            font-size: fn.rpx(20);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .more {
          cursor: pointer;
          position: absolute;
          bottom: fn.rpx(100);
          right: fn.rpx(30);
          display: flex;
          align-items: center;

          .t {
            font-size: fn.rpx(18);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
          }

          .ic {
            object-fit: fill;
            margin-left: fn.rpx(8);
            width: fn.rpx(10);
            height: fn.rpx(14);
          }
        }
      }
    }
  }

}
</style>